<template>
  <header class="m-header" :class="{'yellowbg':yellowbg}">
    <div class="m-header-button is-left" :class="{'icon-border': hasIconBorder}">
      <slot name="left"></slot>
    </div>

    <h1 class="m-header-title" v-text="title"></h1>

    <div class="m-header-button is-right">
      <slot name="right"></slot>
    </div>

  </header>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      yellowbg: {
        type: Boolean,
        default: false
      },
      hasIconBorder: {
        type: Boolean,
        default: false
      }
    }
  }

</script>
<style lang="less">
  /*导入颜色变量*/
  
  @import "../assets/less/common.less";
  .m-header {
    /*position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;*/
    display: flex;
    align-items: center;
    height: @headerHeight;
    padding: 0 10px;
    background: #fff;
    color: @headerDefaultColor;
    /*border-bottom: 1px solid #eee;*/
    background: @headerBg;
    color: #fff;
    a {
      color: #fff;
    }
    .m-header-title {
      color: #fff;
    }
    .m-header-button {
      width: 40px;
      align-items: stretch;
      &.is-left {
        text-align: left;
      }
      &.icon-border {
        border-right: 1px solid #fff;
      }
      &.is-right {
        text-align: right;
      }
      .m-icon-img {
        width: 28px;
        height: 28px;
      }
      .margin-right-10 {
        margin-right: 10px;
      }
    }
    .m-header-title {
      flex: 1;
      text-align: left;
      padding-left: 16px;
      font-size: 18px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    &.yellowbg {
      background: @headerPersonalCenterBg;
      border-bottom: 1px solid @headerPersonalCenterBg;
    }
  }
</style>